<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import UserButton from './UserButton.vue'

import { useTheme } from '@/composables/useTheme'
import { useLocale } from '@/composables/useLocale'

const { toggleTheme } = useTheme()
const { locale, toggleLocale } = useLocale()
const { t } = useI18n<GlobalMessage, Locales>({ useScope: 'global' })
const gotoBeta = () => {
  window.open('https://mimo.qingshaner.com')
}
</script>

<template>
  <div flex="~ justify-between items-center" class="px-4 bg-arco-2">
    <h3 class="text-arco-1 my-xs">
      <span>
        <i class="i-fluent-communication-16-filled text-xl text-arco-primary-6" />
        {{ t('header.title') }}
      </span>
      <a-divider type="double" margin="0.25em" direction="vertical" />
      <span class="text-arco-2 font-thin text-sm">{{ t('header.subtitle') }}</span>
    </h3>
    <a-space>
      <a-popover content="🚧 Beta" position="left" content-class="pt-0! pb-1! px-2!">
        <a-button shape="circle" type="outline" border="solid 1 !arco-gray-2" @click="gotoBeta">
          <template #icon>
            <i class="i-uil-band-aid" text="xl !arco-gray-8" />
          </template>
        </a-button>
      </a-popover>
      <a-button shape="circle" type="outline" border="solid 1 !arco-gray-2" @click="toggleLocale">
        <template #icon>
          <i
            :class="locale === 'zh-CN' ? 'i-uil-letter-chinese-a' : 'i-ri-english-input'"
            text="xl !arco-gray-8"
          />
        </template>
      </a-button>
      <a-button shape="circle" type="outline" border="solid 1 !arco-gray-2" @click="toggleTheme">
        <template #icon>
          <i
            class="i-fluent-weather-sunny-low-24-filled dark:i-fluent-weather-moon-24-filled text-xl !text-arco-gray-8"
          />
        </template>
      </a-button>
      <UserButton />
    </a-space>
  </div>
</template>
